

<template>

    <div style="margin-top: 20px;margin-left: 10px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>系统信息管理</b></el-breadcrumb-item>
        <el-breadcrumb-item>操作日志管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 数据表格的工具栏 -->

    <!--日志数据表格-->
  <div class="flight-audit-container" style="margin-top: 51px;">
    <el-card class="log-card">
      <el-table :data="tableLog" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="sysType" label="登录身份"></el-table-column>
        <el-table-column prop="oprType" label="操作类别"></el-table-column>
        <el-table-column prop="desc" label="操作描述" width="250"></el-table-column>
        <el-table-column prop="doDt" label="操作时间" ></el-table-column>
        <el-table-column prop="logType" label="操作状态" width="160" align="center">
          <template  #default="scope">
          <span v-if="scope.row.logType === 0" style="color: #42b983;font-size: 15px">
            <el-button type="success" style="width: 90px" round>正常</el-button>
          </span>
            <span v-if="scope.row.logType === 1" style="color: red;font-size: 15px">
            <el-button type="danger" style="width: 90px" round>异常</el-button>
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
                size="default"
                type="primary"
                @click="tableGAHandler(scope.$index, scope.row)"
            >
              <el-icon><InfoFilled /></el-icon>
              详情信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页按钮-->
      <div class="demo-pagination-block">
        <el-pagination
            style="justify-content: left"
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[5, 10]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total=pageFormModel.total
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <div style="text-align: right">
          <el-button-group >
            <el-button type="danger" :icon="Delete" size="large"  @click="tableFlush"></el-button>
          </el-button-group>
        </div>
      </div>
    </el-card>
  </div>

  <!--详情按钮信息模态框-->
  <el-dialog v-model="dialogGAState" title="日志详情" width="700">
    <div>
      <el-form ref="formAddRef" :model="formGA" label-width="100px">
        <el-form-item prop="id" label="ID">
          <el-input v-model="formGA.id" readonly></el-input>
        </el-form-item>

        <el-form-item prop="sysType" label="登录身份">
          <el-input v-model="formGA.sysType" readonly></el-input>
        </el-form-item>

        <el-form-item prop="ipAddress" label="IP地址">
          <el-input v-model="formGA.ipAddress" readonly></el-input>
        </el-form-item>

        <el-form-item prop="desc" label="操作描述">
          <el-input v-model="formGA.desc" readonly></el-input>
        </el-form-item>

        <el-form-item prop="oprType" label="操作类别">
          <el-input v-model="formGA.oprType" readonly></el-input>
        </el-form-item>

        <el-form-item prop="doDt" label="操作时间">
          <el-input v-model="formGA.doDt" readonly></el-input>
        </el-form-item>

        <el-form-item prop="requestUrl" label="请求URL">
          <el-input v-model="formGA.requestUrl"
                    :rows="3"
                    type="textarea"
                    readonly
          ></el-input>
        </el-form-item>

        <el-form-item prop="method" label="请求方法">
          <el-input v-model="formGA.method"
                    :rows="3"
                    type="textarea"
                    readonly
          ></el-input>
        </el-form-item>


      </el-form>
    </div>
  </el-dialog>

</template>

<script setup>
import request from "@/utils/request";
import {onMounted, reactive, ref} from "vue";
import {Delete, Edit} from "@element-plus/icons";
import {InfoFilled} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
// 从SessionStorage取出数据
let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token

//访问界面初始化时获取日志信息
onMounted(()=>{
  LogData()
})
const LogData = () =>{
  //alert(token)
  request({
    url : '/manage/aopmanange/selectaoppage',
    method : 'get',
    headers: {
      'token': token
    }
  }).then(res=>{
    tableLog.value = res.data.records
    pageFormModel.total = res.data.total
    pageFormModel.size = res.data.size
    pageFormModel.current = res.data.current
    pageFormModel.pages = res.data.pages
  })
}


///////// 表格 //////////////////
//表格数据
const tableLog = ref([])

const searchFormRef=ref()

//表单的数据模型
const searchFormModel =reactive({
  id : '',
  desc : '',
  sysType : '',
  oprType : '',
  requestUrl : '',
  method : '',
  ipAddress : '',
  logType : '',
  doDt : ''
})

//分页--------------------------------------------------
const currentPage4 = ref()
const pageSize4 = ref()
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  requestPage()

}
const handleCurrentChange = (val) => {
  pageSubFormModel.current=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  requestPage()

}

const requestPage = () =>{
  request({
    url : '/manage/aopmanange/selectaoppage',
    method : 'get',
    params : pageSubFormModel,
    headers: {
      'token': token
    }
  }).then(res=>{
    tableLog.value = res.data.records
    pageFormModel.total = res.data.total
    pageFormModel.size = res.data.size
    pageFormModel.current = res.data.current
    pageFormModel.pages = res.data.pages

  })
}


//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  current : '',
  pages : ''
})

//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
  systype :'',
  oprtype : ''
})


//////////////  详情模态框相关  /////////////////
const dialogGAState = ref(false)//模态框默认关闭
//详情按钮
const tableGAHandler = (rowIndex , rowData) => {

  //获取表格数据赋予详情表单
  formGA.id = rowData.id
  formGA.desc = rowData.desc
  formGA.sysType = rowData.sysType
  formGA.oprType = rowData.oprType
  formGA.doDt = rowData.doDt
  formGA.requestUrl = rowData.requestUrl
  formGA.method = rowData.method
  formGA.ipAddress = rowData.ipAddress
  //启动模态框
  dialogGAState.value = true
}


// 编辑表单初始化数据
const formGAData = {
  id : '',
  desc : '',
  sysType : '',
  oprType : '',
  requestUrl : '',
  method : '',
  ipAddress : '',
  logType : '',
  doDt : ''
}
// 编辑表单绑定数据模型
const formGA = reactive({...formGAData})



//---------------------------------------
//清空日志信息按钮
const tableFlush = () =>{
  //alert("清空日志")
  ElMessageBox.confirm(
      '确认清空所有日志吗',
      '谨慎操作',
      {
        confirmButtonText: '清空',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {//点击删除按钮，进行删除
    request({
      method : 'get',
      url : '/manage/aopmanange/formatting',
      headers: {'token': token}
    }).then(res=>{
      if (999 == res.data.errorCode){
        ElMessage({
          type: 'success',
          message: '清空成功',
        })
        // 请求后刷新表格
        requestPage()
      }
    })
  }).catch(() => {//点击取消按钮，进行退出
    ElMessage({
      type: 'info',
      message: '清空取消',
    })
  })
}

</script>

<style scoped>

</style>